<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>chat聊天室</title>
    <style>
        *, *:before, *:after {
            box-sizing: border-box;
        }
        body, html {
            height: 100%;
            overflow: hidden;
        }
        body, ul {
            margin: 0;
            padding: 0;
        }
        body {
            color: #4d4d4d;
            font: 14px/1.4em 'Helvetica Neue', Helvetica, 'Microsoft Yahei', Arial, sans-serif;
            background: #f5f5f5 url('dist/images/bg.jpg') no-repeat center;
            background-size: cover;
            font-smoothing: antialiased;
        }
        ul {
            list-style: none;
        }
        #chat {
            margin: 20px auto;
            width: 800px;
            height: 600px;
        }
    </style>
    <script type="text/javascript">
        document.onkeydown = function (event){
            var e = event || window.event;
            if (e && e.keyCode == 13) { //回车键的键值为13

            }
        }
    </script>
<style type="text/css">#chat{overflow:hidden;border-radius:3px}#chat .main,#chat .sidebar{height:100%}#chat .sidebar{float:left;width:200px;color:#f4f4f4;background-color:#2e3238}#chat .main{position:relative;overflow:hidden;background-color:#eee}#chat .m-text{position:absolute;width:100%;bottom:0;left:0}#chat .m-message{height:calc(100% - 10pc)}</style><style type="text/css">.m-card{padding:9pt;border-bottom:1px solid #24272c}.m-card footer{margin-top:10px}.m-card .avatar,.m-card .name{vertical-align:middle}.m-card .avatar{border-radius:2px}.m-card .name{display:inline-block;margin:0 0 0 15px;font-size:1pc}.m-card .search{padding:0 10px;width:100%;font-size:9pt;color:#fff;height:30px;line-height:30px;border:1px solid #3a3a3a;border-radius:4px;outline:0;background-color:#26292e}</style><style type="text/css">.m-list li{padding:9pt 15px;border-bottom:1px solid #292c33;cursor:pointer;-webkit-transition:background-color .1s;transition:background-color .1s}.m-list li:hover{background-color:hsla(0,0%,100%,.03)}.m-list li.active{background-color:hsla(0,0%,100%,.1)}.m-list .avatar,.m-list .name{vertical-align:middle}.m-list .avatar{border-radius:2px}.m-list .name{display:inline-block;margin:0 0 0 15px}</style><style type="text/css">.m-text{height:10pc;border-top:1px solid #ddd}.m-text textarea{padding:10px;height:100%;width:100%;border:none;outline:0;font-family:Micrsofot Yahei;resize:none}</style><style type="text/css">.m-message{padding:10px 15px;overflow-y:scroll}.m-message li{margin-bottom:15px}.m-message .time{margin:7px 0;text-align:center}.m-message .time>span{display:inline-block;padding:0 18px;font-size:9pt;color:#fff;border-radius:2px;background-color:#dcdcdc}.m-message .avatar{float:left;margin:0 10px 0 0;border-radius:3px}.m-message .text{display:inline-block;position:relative;padding:0 10px;max-width:calc(100% - 40px);min-height:30px;line-height:2.5;font-size:9pt;text-align:left;word-break:break-all;background-color:#fafafa;border-radius:4px}.m-message .text:before{content:" ";position:absolute;top:9px;right:100%;border:6px solid transparent;border-right-color:#fafafa}.m-message .self{text-align:right}.m-message .self .avatar{float:right;margin:0 0 0 10px}.m-message .self .text{background-color:#b2e281}.m-message .self .text:before{right:inherit;left:100%;border-right-color:transparent;border-left-color:#b2e281}</style></head>
<body>

<div id="chat"><div class="sidebar"><div class="m-card"><header><img class="avatar" width="40" height="40" alt="Coffce" src="dist/images/1.jpg"><p class="name">Coffce</p></header><footer><input class="search" placeholder="search user..."></footer></div><!--v-component--><div class="m-list"><ul><!--v-for-start--><li class="active"><img class="avatar" width="30" height="30" alt="示例介绍" src="dist/images/2.png"><p class="name">示例介绍</p></li><li><img class="avatar" width="30" height="30" alt="webpack" src="dist/images/3.jpg"><p class="name">webpack</p></li><!--v-for-end--></ul></div><!--v-component--></div><div class="main"><div class="m-message"><ul><!--v-for-start--><li><p class="time"><span>15:59</span></p><div ><img class="avatar" width="30" height="30" src="dist/images/2.png"><div class="text">Hello，这是一个基于Vue + Webpack构建的简单chat示例，聊天记录保存在localStorge。简单演示了Vue的基础特性和webpack配置。</div></div></li><li><p class="time"><span>15:59</span></p><div ><img class="avatar" width="30" height="30" src="dist/images/2.png"><div class="text">项目地址: https://github.com/coffcer/vue-chat</div></div></li><li><p class="time"><span>16:0</span></p><div class="self"><img class="avatar" width="30" height="30" src="dist/images/1.jpg"><div class="text">123</div></div></li><li><p class="time"><span>16:0</span></p><div class="self"><img class="avatar" width="30" height="30" src="dist/images/1.jpg"><div class="text"> 钟表，可以回到起点，却已不是昨天。爱情，可以回到原点，却也不像从前</div></div></li><li><p class="time"><span>15:59</span></p><div ><img class="avatar" width="30" height="30" src="dist/images/2.png"><div class="text"> 以为蒙上了眼睛，就可以看不见这个世界;以为捂住了耳朵，就可以听不到所有的烦恼;以为脚步停了下来，心就可以不再远行;以为我需要的爱情，只是一个拥抱。</div></div></li><li><p class="time"><span>15:59</span></p><div ><img class="avatar" width="30" height="30" src="dist/images/2.png"><div class="text"> 当恶梦展开，所有的一切都开始失序了。人类，可以为了所爱的人，变成天使，也可以为了所爱的人，变成魔鬼。这个世界上，所有的事物都是相对应的，有人得到，就代表有人会失去</div></div></li><!--v-for-end--></ul></div><!--v-component--><div class="m-text"><textarea id="content" placeholder="按 Ctrl + Enter 发送"></textarea></div><!--v-component--></div></div>
<script src="dist/vue.js"></script>
<script src="dist/main.js"></script>
<div style="text-align:center;">
<p>来源:<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
</div>



</body></html>